<template>
  <div id="loginLogDetail">
    <div class="div">
      <el-form :model="loginLogForm" label-width="100px" class="selectForm" disabled>
        
        <el-row :gutter="24">
          <el-col :span="12">

            <el-form-item label="用户名" >
              <el-input v-model="loginLogForm.username" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="真实密码">
              <el-input v-model="loginLogForm.password" />
            </el-form-item>
          </el-col>
        </el-row>
        
       
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="访问IP地址">
              <el-input v-model="loginLogForm.ip" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录时间">
              <el-input v-model="loginLogForm.loginTime" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="响应体" style="margin-top: 4vh">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6}"
            v-bind:value="JSON.stringify(loginLogForm.apiResponse)"
            show-word-limit>
          </el-input>
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="响应内容" >
              <el-input v-model="loginLogForm.message.message" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="响应状态码" >
              <el-input v-model="loginLogForm.code" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="登录状态">
              <el-input v-bind:value="loginLogForm.status === true ? '登录成功' : '登录失败'" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="24">
          <el-col :span="24" style="text-align:right">
            <el-form-item> 
              <el-button @click="onReturn" :disabled="false">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </div>
</template>

<script>
import tool from '@/assets/js/tool'
export default {
  name: "loginLogDetail",
  mixins: [tool],
  data() {
    return {
      loginLogForm: {},
      status: ""
    }
  },
  methods: {
    onReturn() {
      this.$router.go(-1)
    },
  },
  created() {
    this.loginLogForm = this.$route.params
  }
}
</script>

<style lang="scss" scoped>

.div {
  width: 50vw;
  margin-left: 18%;
}

.selectForm /deep/ .el-form-item__label {
  font-size: 12px;
}

.el-form-item{
  margin-bottom: 0px;
}

.el-input /deep/ .el-input__inner{ 
  height: 32px;
  font-size: 13px;
  box-shadow: none;
  border: 1px solid #e9e9e9;
}

.el-row >>> .el-col {
  margin-top: 5vh;
}

.el-button {
  line-height: 0px;
  height: 32px;
  padding: 12px;
  font-size: 2px;
  border-radius: 20px;
}

.img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-top: 3px;
  border: 3px solid #f2f3f5;
  background: #619fe7;
}

.changeImg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: 8px;
}

.imgPr {
  position: relative;
  display: inline-block;
  text-align: center;
}

.imgPa {
  position: absolute;
  left:0;
  top:0;
  right:0;
  margin-left: 36px;
  cursor: pointer;
  font-size: 22px;
}

.changePassword {
  .el-form-item{
    margin-bottom: 20px;
  }
}

</style>


<style lang="scss" >

/* 自定义宽度 */
#addAndUpdateTable {
  .my-el-select {
    .el-input__inner {
        height: 32px;
    }
  }
}

</style>